<template>
  <el-form
    ref="ruleFormRef"
    :model="enterpriseForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :hide-required-asterisk="false"
    style="max-width: 1000px"
  >
    <el-form-item label="企业名称" prop="name">
      <el-input v-model="enterpriseForm.name" placeholder="请输入企业名称"></el-input>
    </el-form-item>
    <!-- <el-form-item label="企业性质" prop="nature">
      <el-select
        v-model="enterpriseForm.nature"
        placeholder="选择企业性质"
        style="width: 240px"
      >
        <el-option
          v-for="item in natureOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="企业规模" prop="scale">
      <el-select
        v-model="enterpriseForm.scale"
        placeholder="选择企业规模"
        style="width: 240px"
      >
        <el-option
          v-for="item in scaleOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item> -->
    <el-form-item label="营业执照" prop="businessLicense">
      <div class="form-img" @click="handleUpload('businessLicense')">
        <div class="has-img" v-if="enterpriseForm.businessLicense">
          <img :src="enterpriseForm.businessLicense" alt="" />
          <span @click.stop="handleRemoveImg('thumb')">
            <el-icon><Delete /></el-icon>
          </span>
        </div>
        <el-icon v-else><Plus /></el-icon>
      </div>
    </el-form-item>
    <el-form-item label="企业地址" prop="position">
      <el-input v-model="enterpriseForm.position" placeholder="请输入企业地址"></el-input>
    </el-form-item>
    <el-form-item label="统一社会信用代码" prop="creditCode">
      <el-input v-model="enterpriseForm.creditCode" placeholder="请输入统一社会信用代码"></el-input>
    </el-form-item>
    <el-form-item label="法定代表人姓名" prop="legalRepresentative">
      <el-input v-model="enterpriseForm.legalRepresentative"></el-input>
    </el-form-item>
    <el-form-item label="法定代表人身份证" prop="legalIdCard">
      <div
        class="form-img"
        v-for="(item,index) in enterpriseForm.legalIdCard"
        :key="item"
        @click="handleUpload('legalIdCard',index)"
      >
        <div class="has-img" v-if="item">
          <img :src="item" alt="" />
          <span @click.stop="handleRemoveImg('thumb')">
            <el-icon><Delete /></el-icon>
          </span>
        </div>
        <el-icon v-else><Plus /></el-icon>
      </div>
    </el-form-item>
   
    <el-form-item label="经办人姓名" prop="handlingPerson">
      <el-input v-model="enterpriseForm.handlingPerson"  placeholder="请输入经办人姓名"></el-input>
    </el-form-item>
    <el-form-item label="经办人身份证" prop="handlingIdCard">
      <div
        class="form-img"
        v-for="(item,index) in enterpriseForm.handlingIdCard"
        :key="item"
        @click="handleUpload('handlingIdCard',index)"
      >
        <div class="has-img" v-if="item">
          <img :src="item" alt="" />
          <span @click.stop="handleRemoveImg('thumb')">
            <el-icon><Delete /></el-icon>
          </span>
        </div>
        <el-icon v-else><Plus /></el-icon>
      </div>
    </el-form-item>
    <el-form-item label="银行开户名" prop="bankAccountName">
      <el-input v-model="enterpriseForm.bankAccountName" placeholder="请输入银行开户名"></el-input>
    </el-form-item>
    <el-form-item label="开户银行" prop="bankName">
      <el-input v-model="enterpriseForm.bankName" placeholder="请输入开户银行"></el-input>
    </el-form-item>
    <el-form-item label="银行账户" prop="bankAccount">
      <el-input v-model="enterpriseForm.bankAccount" placeholder="请输入银行账户"></el-input>
    </el-form-item>
  </el-form>
  <!-- 图片上传 -->
  <FilesUpload v-if="showFilesUpload" v-model:showDialog="showFilesUpload" :isPublic="true" :modelId="1" :limit="1" @getFileList="insertFiles" :isToJpg="true"></FilesUpload>
</template>
<script setup>
import { ref, reactive, defineProps, defineExpose } from "vue";
import { Plus, Delete } from "@element-plus/icons-vue";
import { FilesUpload } from "@ruifox-cms/components"

const props = defineProps({
  formRef: {
    type: Object,
    default: () => ({}),
  },
  enterpriseForm: {
    type: Object,
    default: () => ({}),
  },
});
const ruleFormRef = ref(null);
const enterpriseForm = ref(props.enterpriseForm);

// const natureOptions = ref([
//   {
//     value: '外资',
//     label: '外资',
//   },
//   {
//     value: '合资',
//     label: '合资',
//   },
//   {
//     value: '国企',
//     label: '国企',
//   },
//   {
//     value: '民营公司',
//     label: '民营公司',
//   },
//   {
//     value: '政府机关',
//     label: '政府机关',
//   },
//   {
//     value: '事业单位',
//     label: '事业单位',
//   },
//   {
//     value: '上市公司',
//     label: '上市公司',
//   },
//   {
//     value: '创业公司',
//     label: '创业公司',
//   },
// ])
// const scaleOptions = ref([
//   {
//     value: '少于50人',
//     label: '少于50人',
//   },
//   {
//     value: '50-150',
//     label: '50-150',
//   },
//   {
//     value: '150-500',
//     label: '150-500',
//   },
//   {
//     value: '500-1000',
//     label: '500-1000',
//   },
//   {
//     value: '1000-5000',
//     label: '1000-5000',
//   },
//   {
//     value: '5000-10000',
//     label: '5000-10000',
//   },
//   {
//     value: '一万人以上',
//     label: '一万人以上',
//   },
// ])
// watch(() => props.fields, (newOptions) => {
//   newFields.value = [...newOptions];
//   modifyOption(newFields.value)
// }, { deep: true });
//表单校验
// 检查 数组 是否包含两个字符串
// const validateLegalIdCard = (rule, value, callback) => {
//   if (Array.isArray(value) && value.length === 2 && value.every(item => typeof item === 'string' && item.trim()!== '')) {
//     callback();
//   } else {
//     callback(new Error(rule.message));
//   }
// };
const rules = reactive({
  name: [{ required: true, message: "请填写企业名称", trigger: "blur" }],
  nature: [{ required: true, message: "请选择企业性质", trigger: "blur" }],
  scale: [{ required: true, message: "请选择企业规模", trigger: "blur" }],
  position: [{ required: true, message: "请填写企业地址", trigger: "blur" }],
  creditCode: [
    { required: true, message: "请填写统一社会信用代码", trigger: "blur" },
    {
      pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
      message: "请输入正确的统一社会信用代码",
      trigger: "blur"
    }
  ],
  legalRepresentative: [{ required: true, message: "请填写法定代表人姓名", trigger: "blur" }],
  // legalIdCard: [{  validator: validateLegalIdCard, message: "请上传法定代表人身份证正反面照片", trigger: "blur" }],
  // businessLicense: [{ required: true, message: "请上传营业执照", trigger: "blur" }],
  handlingPerson: [{ required: true, message: "请填写经办人姓名", trigger: "blur" }],
  // handlingIdCard: [{  validator: validateLegalIdCard, message: "请上传经办人身份证正反面照片", trigger: "blur" }],
  bankAccountName: [{ required: true, message: "请填写银行开户名", trigger: "blur" }], 
  bankName: [{ required: true, message: "请填写开户银行", trigger: "blur" }], 
  bankAccount: [
    { required: true, message: "请填写银行账户", trigger: "blur" },
    {
      pattern: /^\d+$/,
      message: "请输入正确的银行账户，只能包含数字",
      trigger: "blur"
    }
  ], 
});

const validateForm = () => {
  return new Promise((resolve) => {
    ruleFormRef.value.validate((isValid, fields) => {
      if (isValid) {
        console.log("submit!");
        resolve(true);
      } else {
        console.log("error submit!", fields);
        resolve(false);
      }
    });
  });
};

// 附件上传
const showFilesUpload = ref(false)
const resourceFormList = ref([])
const insertFiles = filesList => {
  resourceFormList.value = filesList.map(item => {
    return {
      resourceData: {
        title: item.name,
        url: item.url,
      },
      needUpload: item.needUpload,
      tagList: item.tagList || [],
    }
  })
  console.log("resourceFormList.value111",resourceFormList.value);
  // theFile.value = resourceFormList.value[0].resourceData.url
  console.log("theFile.value",theFile.value);
  console.log("theIndex.value",theIndex.value);
  if(theIndex.value){
    enterpriseForm.value[theFile.value][--theIndex.value] =  resourceFormList.value[0].resourceData.url
  } else {
    enterpriseForm.value[theFile.value] =  resourceFormList.value[0].resourceData.url
  }
  console.log("enterpriseForm",enterpriseForm.value);
  
}
const theFile = ref(null)
const theIndex = ref(null)
const handleUpload = async (item,index) => { 
  theFile.value = item;
  index++;
  if(index){
    theIndex.value = index;
  } else {
    theIndex.value = "";
  }
  console.log("点击上传",item,index);
  showFilesUpload.value = true;
};

// 获取表单数据
const getFormData = () => {
  return enterpriseForm.value
}
defineExpose({
  getFormData,
  validateForm
})
</script>

<style scoped lang="scss">
.demo-ruleForm{
  margin: 20px auto 0;
  /* display: flex;
  flex-wrap: wrap;
  .el-form-item{
    width: 50%;
    padding-left: 10px;
    box-sizing: border-box;
  } */
}
.form-img{
  height: 100px;
  width: 150px;
  border: 1px dashed $borderColor;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  .has-img{
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      max-width: 100%;
      max-height: 100%;
    }
    span{
      display: none;
      position: absolute;
      right: 0;
      top: 0;
      background-color: $failColor;
      height: 20px;
      width: 20px;
      font-size: 18px;
      color: #fff;
    }
    &:hover{
      span{
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  } 
}
</style>
